<template>
  <div class="gray-box">
    <div class="wrapper">
      <!-- 商品促销 -->
      <div class="promo-list clearfix">
        <div class="col" v-for="item in list" :key="item.index">
          <a class="item" href="goods-detail.html"><img :src="item.imgUrl" alt="" /></a>
        </div>
      </div>

      <!-- 限时抢购 -->
      <div class="flash-sale-section">
        <div class="section-hd">
          <div class="title">限时抢购</div>
        </div>
        <div class="flash-sale clearfix">
          <div class="grid grid-b">
            <a href="goods-detail.html"><img src="../../../assets/statics/uploads/17.jpg" alt="" /></a>
          </div>
          <div class="grid grid-m">
            <a href="goods-detail.html">
              <div class="inner-text">
                <div class="tit">小米Max</div>
                <div class="stit">6.44''大屏黄金尺寸</div>
                <div class="info">大屏大电量</div>
              </div>
              <img src="../../../assets/statics/uploads/18.jpg" alt="" />
            </a>
          </div>
          <div class="grid grid-s">
            <a href="goods-detail.html">
              <div class="inner-text">
                <div class="tit">无线运动耳麦</div>
                <div class="stit">大牌钜惠驾到</div>
              </div>
              <img src="../../../assets/statics/uploads/53.jpg" alt="" />
            </a>
          </div>
          <div class="grid grid-s">
            <a href="goods-detail.html">
              <div class="inner-text">
                <div class="tit">靠谱好装备</div>
                <div class="stit">简约书台柜组合</div>
              </div>
              <img src="../../../assets/statics/uploads/57.jpg" alt="" />
            </a>
          </div>
          <div class="grid grid-s">
            <a href="goods-detail.html">
              <div class="inner-text">
                <div class="tit">无线运动耳麦</div>
                <div class="stit">大牌钜惠驾到</div>
              </div>
              <img src="../../../assets/statics/uploads/52.jpg" alt="" />
            </a>
          </div>
          <div class="grid grid-s">
            <a href="goods-detail.html">
              <div class="inner-text">
                <div class="tit">靠谱好装备</div>
                <div class="stit">简约书台柜组合</div>
              </div>
              <img src="../../../assets/statics/uploads/20.jpg" alt="" />
            </a>
          </div>
          <div class="grid grid-s">
            <a href="goods-detail.html">
              <div class="inner-text">
                <div class="tit">无线运动耳麦</div>
                <div class="stit">大牌钜惠驾到</div>
              </div>
              <img src="../../../assets/statics/uploads/19.jpg" alt="" />
            </a>
          </div>
          <div class="grid grid-s">
            <a href="goods-detail.html">
              <div class="inner-text">
                <div class="tit">靠谱好装备</div>
                <div class="stit">简约书台柜组合</div>
              </div>
              <img src="../../../assets/statics/uploads/20.jpg" alt="" />
            </a>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  name: 'IndexGrayBox.vue',
  data () {
    return {
      list: [
        {
          imgUrl: require('../../../assets/statics/uploads/13.jpg')
        },
        {
          imgUrl: require('../../../assets/statics/uploads/14.jpg')
        },
        {
          imgUrl: require('../../../assets/statics/uploads/15.jpg')
        },
        {
          imgUrl: require('../../../assets/statics/uploads/16.jpg')
        }
      ]
    }
  }
}
</script>
<style>
  .gray-box { background-color: #f5f5f5; }
  .clearfix, .row, .ui-tabs, .wrapper, .shop-nav-rec { zoom: 1; }
  .clearfix:before, .row:before, .ui-tabs:before, .wrapper:before, .shop-nav-rec:before, .clearfix:after, .row:after, .ui-tabs:after, .wrapper:after, .shop-nav-rec:after { content: ''; display: table; }
  .clearfix:after, .row:after, .ui-tabs:after, .wrapper:after, .shop-nav-rec:after { clear: both; }
  .promo-list { margin: 50px 0 30px; }
  .promo-list .col { float: left; padding-left: 13px; }
  .promo-list .col:first-child { padding-left: 0; }
  .promo-list .item { display: block; }
  .promo-list .item img { display: block; width: 290px; height: 184px; }
  .flash-sale { margin: 0 0 -16px -16px; }
  .flash-sale-section { padding-bottom: 50px; }
  .flash-sale .grid { position: relative; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 0 16px 16px; overflow: hidden; line-height: 22px; background-color: #fff; }
  .flash-sale .grid-b { width: 592px; height: 396px; background: transparent; }
  .flash-sale .grid-b img { display: block; -webkit-transition: transform 0.5s; transition: transform 0.5s; -webkit-perspective: 1000; perspective: 1000; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  .flash-sale .grid-b:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); }
  .flash-sale .grid-m { width: 288px; height: 396px; padding: 40px 25px; }
  .flash-sale .grid-m img { width: 240px; height: 240px; bottom: 20px; right: 10px; }
  .flash-sale .grid-s { padding: 40px 120px 0 24px; width: 288px; height: 190px; }
  .flash-sale .grid-s img { width: 110px; height: 110px; bottom: 10px; right: 10px; }
  .flash-sale .grid-m img, .flash-sale .grid-s img { position: absolute; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
  .flash-sale .grid-m:hover img, .flash-sale .grid-s:hover img { -webkit-transform: translateX(-5px); transform: translateX(-5px); }
  .flash-sale .inner-text { position: relative; z-index: 1; }
  .flash-sale .tit { font-size: 16px; color: #333; }
  .flash-sale .stit { color: #666; }
  .flash-sale .info { color: #ff4d4d; }
  .section-hd { position: relative; margin: 35px 0 15px; height: 44px; line-height: 44px; }
  .section-hd .title { padding-left: 4px; font-size: 24px; }
</style>
